<template>
  <h1>{{ o }}</h1>
  <button @click="setOAge">点击</button>
  <hr>
  <h1>{{ num }}</h1>
  <button @click="setNum">点击</button>
</template>
<!-- // setup作为script的属性 是 setup函数的语法糖 -->
<script setup>
 import {reactive } from 'vue'
//  修改对象的属性
  let o = reactive({
    uname:"张三",
    age:18
  })
  const setOAge = ()=>{
    o.age++
  }
// ===========reactive只能创建引用类型的响应式数据 不能创建基本类型的响应式数据===============
  let num = reactive(0)
  const setNum = ()=>{
    num++
    console.log(num);
  }
// const obj = ref({
//   uname:"张三",
//   age:18
// })
// const setOAge = ()=>{
//   console.log(o );
//   // console.log(o , obj);
// }
</script>
<script>
// 新创建script标签 用于写入name属性;
  export default {
    name:"App"
  }
</script>
